<template>
  <div class="app-container">
    <h4 class="form-header h4">办理入职</h4>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-left:24px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="18" :md="12" :lg="6">
          <el-form-item label="入职警号" prop="inductionEmployee.employeeCode">
            <el-input v-model="form.inductionEmployee.employeeCode" placeholder="请输入警号" ref="employeeCode" :disabled="disableInput">
              <template slot="prepend">FJ</template>
            </el-input>
          </el-form-item>
          <el-form-item label="入职日期" prop="inductionEmployee.employeeInductionDate">
            <el-date-picker v-model="form.inductionEmployee.employeeInductionDate" type="date" placeholder="入职日期" value-format="yyyy-MM-dd" style="width: 100%;" :disabled="disableInput">
            </el-date-picker>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="机构层级">
                <el-select v-model="form.inductionEmployee.employeeAgency" placeholder="机构层级" disabled>
                  <el-option v-for="dict in dict.type.emp_employee_agency" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辅警类型">
                <el-select v-model="form.inductionEmployee.employeeType" placeholder="辅警类型" disabled>
                  <el-option v-for="dict in dict.type.emp_employee_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="归属部门" prop="inductionEmployee.deptId">
            <treeselect v-model="form.inductionEmployee.deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门" disabled />
          </el-form-item>
          <el-form-item label="辅警层级">
            <el-select v-model="form.inductionEmployee.employeeLevel" placeholder="辅警层级" :disabled="disableInput" style="width: 100%;">
              <el-option v-for="dict in dict.type.emp_employee_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="招聘类型">
                <el-select v-model="form.inductionEmployee.employeeRecruitType" placeholder="招聘类型" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_recruit_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招聘批次">
                <el-select v-model="form.inductionEmployee.employeeRecruitBatch" placeholder="招聘批次" :disabled="disableInput">
                  <el-option v-for="dict in dict.type.emp_recruit_batch" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="招聘日期" prop="inductionEmployee.employeeRecruitDate">
            <el-date-picker v-model="form.inductionEmployee.employeeRecruitDate" type="date" placeholder="招聘日期" value-format="yyyy-MM-dd" style="width: 100%;" :disabled="disableInput">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="档案编号" prop="inductionEmployee.employeeArchives">
            <el-input v-model="form.inductionEmployee.employeeArchives" placeholder="请输入档案编号" />
          </el-form-item>
          <!-- <el-form-item label="合同编号" prop="employeeIdCard">
            <el-input v-model="form.employeeIdCard" placeholder="请输入身份证号" />
          </el-form-item> -->
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="4.5" style="margin-left:24px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-descriptions title="基本信息" direction="vertical" :column="2" border style="padding:6px 8px;width:240px;" size="small" class="scrollable-descriptions">
            <el-descriptions-item label="名称">{{form.inductionEmployee.employeeName}}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{form.inductionEmployee.employeePhone}}</el-descriptions-item>
            <el-descriptions-item label="证件号码" :span="2">{{form.inductionEmployee.employeeIdCard}}</el-descriptions-item>
            <!-- <el-descriptions-item label="归属部门" :span="2">{{form.inductionEmployee.employeeDepartment != null ? form.inductionEmployee.employeeDepartment.deptName : "--"}}</el-descriptions-item>
            <el-descriptions-item label="机构层级"><dict-tag :options="dict.type.emp_employee_agency" :value="form.inductionEmployee.employeeAgency" /></el-descriptions-item>
            <el-descriptions-item label="辅警层级"><dict-tag :options="dict.type.emp_employee_type" :value="form.inductionEmployee.employeeType" /></el-descriptions-item> -->
            <el-descriptions-item label="性别"><el-tag size="small"><dict-tag :options="dict.type.sys_user_sex" :value="form.inductionEmployee.employeeSex" /></el-tag></el-descriptions-item>
            <el-descriptions-item label="学历"><dict-tag :options="dict.type.emp_employee_education" :value="form.inductionEmployee.employeeEducation" /></el-descriptions-item>
            <el-descriptions-item label="政治面貌"><dict-tag :options="dict.type.emp_employee_politics" :value="form.inductionEmployee.employeePolitics" /></el-descriptions-item>
            <el-descriptions-item label="户籍地址"><dict-tag :options="dict.type.emp_employee_domicile" :value="form.inductionEmployee.employeeDomicile" /></el-descriptions-item>
            <!--<el-descriptions-item label="招聘类型"><el-tag size="small"><dict-tag :options="dict.type.emp_recruit_type" :value="form.employeeRecruitType" /></el-tag></el-descriptions-item>
            <el-descriptions-item label="招聘批次"><dict-tag :options="dict.type.emp_recruit_batch" :value="form.employeeRecruitBatch" /></el-descriptions-item> -->
            <!-- <el-descriptions-item label="招聘日期" :span="2">{{form.inductionEmployee.employeeRecruitDate}}</el-descriptions-item> -->
          </el-descriptions>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保 存</el-button>
        <el-button @click="close()">返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import { getInduction, updateInduction } from '@/api/employee/induction';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'employee-edit',
  dicts: ['sys_user_sex', 'emp_employee_status', "emp_employee_level", "emp_employee_agency", "emp_employee_type",
    "emp_employee_education", "emp_employee_politics", "emp_employee_domicile", "emp_recruit_type", "emp_recruit_batch"],
  components: { Treeselect },
  data() {
    var chekcCode = (rule, value, callback) => {
      let reg = /^\d{4}$/
      if (!value) {
        return callback(new Error('警号不能为空'));
      } else if (!reg.test(value)) {
        return callback(new Error('请输入4位长度的数字'));
      } else {
        callback()
      }
    };
    return {
      // 部门树选项 修改前
      deptOptions: undefined,
      // 部门树选项 修改后
      deptOptions: [],
      disableInput: false,
      form: {
        inductionEmployee: {}
      },
      rules: {
        inductionEmployee: {
          employeeCode: [{ required: true, validator: chekcCode, trigger: 'blur' }],
          employeeInductionDate: [{ required: true, message: '入职日期不能为空', trigger: 'blur' }],
        },
      }
    };
  },
  created() {
    this.getDeptTree();
    // this.reset();
    const inductionId = this.$route.params && this.$route.params.inductionId;
    getInduction(inductionId).then(response => {
      this.form = response.data;
      this.form.inductionEmployee.employeeCode = this.form.inductionEmployee.employeeCode != null ? this.form.inductionEmployee.employeeCode.slice(-4) : this.form.inductionEmployee.employeeCode;
      // 审核中与已审核禁用标识
      if (this.form.status == 1 || this.form.status == 2) {
        this.disableInput = true;
      }
    });
  },
  mounted() { },

  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.inductionEmployee.employeeCode = "FJ" + this.form.inductionEmployee.employeeCode
          updateInduction(this.form).then(response => {
            this.$modal.msgSuccess('新增成功');
            this.close();
          }).catch(error => {
            this.form.inductionEmployee.employeeCode = undefined;
            this.$refs.employeeCode.focus();
          }).finally(() => {
          });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: '/employee/induction' };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>

<style scoped>
.scrollable-descriptions {
  overflow-x: auto;
  /* height: 500px; */
  max-width: 100%; /* 根据需要设置最大宽度 */
}

/deep/.el-descriptions__title {
  margin-bottom: -18px;
}
</style>